<!--
 * @Author: jiajin20 3196117119@qq.com
 * @Date: 2024-12-08 19:47:43
 * @LastEditors: jiajin20 3196117119@qq.com
 * @LastEditTime: 2024-12-08 20:49:28
 * @FilePath: \web-frontc:\Users\31961\Desktop\2023.6.28页面创意设计\index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="static/css/active.css">
    <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
    <script src="static/js/vue.min.js"></script>
    <script src="static/js/axios.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <link href="https://fonts.googleapis.com/css?family=Fredoka+One&display=swap" rel="stylesheet">
    <title>花瓣||活动</title>
</head>

<body>
    <div class="content" id="app">
        <div class="content-l">
            <h2>{{active.title}}</h2>
            <br>
            <span> {{active.imfomation}}</span>
            <div class="circle"></div>
            <button></button>
        </div>
        <div class="content-r">
            <div class="img" v-for="(image, index) in imageList">
                <img :key="index" :src="image" alt="Event Image" class="event-image" @error="handleImageError">
            </div>
        </div>
    </div>
    </div>

</body>

<script>
    new Vue({
        el: '#app', // Vue 实例挂载到 id 为 app 的 DOM 元素
        data() {
            return {
                active: {}, // 保存活动信息
                imageList: [] // 保存图片列表
            };
        },
        mounted() {
            this.fetchData();
        },
        methods: {
            // 获取活动信息和图片列表
            fetchData() {
                axios.get('/vscf/active/all') // 替换为你的后端接口
                    .then(response => {
                        const data = response.data;
                        this.active = data.active; // 保存活动信息
                        this.imageList = data.imageList; // 保存图片地址列表
                    })
                    .catch(error => {
                        console.error('Error fetching data:', error);
                    });
            },

            // 图片加载错误时的处理
            handleImageError(event) {
                event.target.src = 'http://example.com/default-image.jpg'; // 设置默认图片
            }
        }
    });
</script>
<script src="static/js/active.js"> </script>
</html>